<template>
  <view class="orderItem" @click.stop="viewInfo">
    <view class="top">
      <view class="top-left">
        <image class="icon" mode="aspectFit" :src="`${STATIC_URL2}bag.png`" />
        <view class="text"> 订单信息 </view>
      </view>
      <view class="top-state"> {{ orderState }} </view>
    </view>
    <order-content :item="item.order_goods" />
    <view class="pay"> 实付：¥ {{ item.money }} </view>
    <view class="oper">
      <view
        class="btn primary"
        @click.stop="cancelOrder"
        v-if="item.status == 0"
      >
        取消订单
      </view>
      <view
        class="btn primary"
        @click.stop="payImmediate"
        v-if="item.status == 0"
      >
        立即支付
      </view>

      <!-- <view class="btn primary" @click.stop="returnNavigate"> 申请退款 </view> -->
      <!-- <view
        class="btn primary"
        @click.stop="logisticsNavigate"
        v-if="item.status == 2"
      >
        查看物流
      </view> -->
      <view class="btn color" @click.stop="confirm" v-if="item.status == 2">
        确认收货
      </view>
      <view class="btn color" @click.stop="returnApply" v-if="item.status == 3">
        申请售后
      </view>
      <!-- <view class="btn color" @click.stop="revokeApply" v-if="item.status == 4">
        撤销售后
      </view> -->
    </view>
    <u-action-sheet
      :list="payList"
      v-model="payState"
      @click="payClick"
    ></u-action-sheet>
  </view>
</template>
<script>
import { payment } from "@/utils/payment";
import { statePay, stateUpdate } from "@/utils/api";
import OrderContent from "@/components/order/order";
export default {
  props: {
    item: {
      type: Object,
    },
  },
  components: {
    OrderContent,
  },
  computed: {
    orderState() {
      let status = ["待支付", "待发货", "待收货", "已完成", "售后", "已取消"];
      return status[this.item.status];
    },
  },
  data() {
    return {
      payList: [
        {
          text: "余额支付",
          value: 0,
        },
        {
          text: "微信支付",
          value: 1,
        },
      ],
      payState: false,
    };
  },
  methods: {
    // 查看详情
    viewInfo() {
      uni.navigateTo({
        url:
          (this.item.status == 4
            ? "/pages/returnDetails/returnDetails?id="
            : "/pages/orderDetails/orderDetails?id=") + this.item.id,
      });
    },
    // 申请退款
    returnNavigate() {
      uni.navigateTo({
        url: "/pages/common/return/return",
      });
    },
    // 查看物流
    logisticsNavigate() {
      uni.navigateTo({
        url: "/pages/common/logistics/logistics?id=" + this.item.id,
      });
    },
    // 确认收货
    confirm() {
      uni.showModal({
        title: "确认收货吗？",
        success: ({ confirm }) => {
          if (confirm) {
            stateUpdate({
              id: this.item.id,
              status: this.item.status,
            }).then((resp) => {
              console.log("取消订单", resp);
              if (resp.code == 200) {
                this.$emit("orderRefresh");
              }
            });
          }
        },
      });
    },
    // 取消订单
    cancelOrder() {
      uni.showModal({
        title: "确认取消吗？",
        success: ({ confirm }) => {
          stateUpdate({
            id: this.item.id,
            status: this.item.status,
          }).then((resp) => {
            console.log("取消订单", resp);
            if (resp.code == 200) {
              this.$emit("orderRefresh");
            }
          });
        },
      });
    },
    // 立即支付
    payImmediate() {
      this.payState = true;
    },
    payClick(index) {
      statePay({
        id: this.item.id,
        pay: this.payList[index].value,
      }).then((resp) => {
        console.log("订单支付", resp);
        if (resp.code == 200) {
          if (resp.data.payRes) {
            payment(resp.data.payRes).then((resp) => {
              console.log("支付成功", resp);
              this.$emit("orderRefresh");
            });
          } else {
            uni.showToast({
              icon: "none",
              title: resp.msg,
              success: () => {
                this.$emit("orderRefresh");
              },
            });
          }
        } else {
          uni.showToast({
            icon: "none",
            title: resp.msg,
          });
        }
      });
    },
    // 申请售后
    returnApply() {
      uni.navigateTo({
        url: "/pages/common/return/return?id=" + this.item.id,
      });
    },
    // 撤销申请
    revokeApply() {},
  },
};
</script>
<style lang="scss" scoped>
.orderItem {
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx 25rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  .top {
    @include flex;
    &-left {
      font-size: 30rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      .icon {
        width: 25rpx;
        height: 30rpx;
        margin-right: 18rpx;
      }
    }
    &-state {
      font-size: 26rpx;
    }
  }
  .pay {
    line-height: 50rpx;
    position: relative;
    text-align: right;
    font-size: 26rpx;
    // &::before {
    //   content: "";
    //   width: 100%;
    //   height: 1rpx;
    //   border-top: 1rpx solid #eeeeee;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   transform: scaleY(0.5);
    // }
    &::after {
      content: "";
      width: 100%;
      height: 1rpx;
      border-top: 1rpx solid #eeeeee;
      position: absolute;
      left: 0;
      bottom: 0;
      transform: scaleY(0.5);
    }
  }
  .oper {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 135rpx;
      line-height: 45rpx;
      text-align: center;
      border-radius: 8rpx;
      margin-left: 18rpx;
    }
    .primary {
      border: 1px solid #cfcfcf;
      border-radius: 8rpx;
    }
    .color {
      background: #cd8544;
      color: #ffffff;
    }
  }
}
</style>
